<template>
  <view class="zengp-box" v-if="items && items.length > 0">
    <view class="dis-flex flex-y-center flex-y-between">
      <view class="zp-des">
        <text class="zp-des-t">联盟商家赠品</text>
        <text>(抢先下单获得)</text>
      </view>
    </view>
    <view class="zp-list">
      <view class="zp-item" v-for="(item, index) in items" :key="index">
        <view class="con dis-flex">
          <view class="zp-l">赠品{{ index + 1 }}</view>
          <view class="zp-con" style="flex: 1">
            <view class="zp-tl dis-flex flex-y-between">
              <view>{{ item.name }}</view>
              <view class="flex-1"></view>
              <view v-if="isLogin" class="count-zp">
                <text style="margin-right: 10rpx">已获赠</text>
                <text style="font-size: 36rpx; font-weight: bold">{{
                  item.takeReceivedCount
                }}</text>
                <text style="margin-left: 10rpx">{{ item.unit || '件' }}</text>
              </view>
              <text v-else class="count-zp" style="color: darkorange">登录后获赠</text>
            </view>
            <view class="zp-rule dis-flex flex-y-center">
              <view class="dis-flex" @click="showRule(item)">
                <text style="margin-right: 10rpx">使用须知</text>
                <u-icon name="/static/enter.png" size="20"></u-icon>
              </view>
              <view class="flex-1"></view>
              <view class="dis-flex flex-column">
                <view class="count-limit" style="color: orange" v-if="item.invalid">已失效</view>
                <text
                  v-if="item.takeLimitCount > 0 && item.takeLimitCount < 99999"
                  class="count-limit"
                >
                  限领{{ item.takeLimitCount }}{{ item.unit || '样' }}
                </text>
                <text v-else class="count-limit">无限领取</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup v-model="showRuleModel" mode="center" width="600" height="auto" border-radius="20">
      <view class="rule_box">
        <view class="tl"> 规则说明</view>
        <u-parse class="content" :html="ruleContent"></u-parse>
        <view class="bt" @click="showRuleModel = false">知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'item_activity',
  props: {
    items: Array,
    login: Boolean
  },
  data() {
    return {
      isLogin: false,
      showRuleModel: false,
      ruleContent: ''
    }
  },
  mounted() {
    //console.log('mounted: login=' + this.login)
    this.isLogin = this.login !== undefined ? this.login : this.$utils.isLogin()
  },
  watch: {
    login(val) {
      //console.log('watch: login=' + val)
      this.isLogin = val
    }
  },
  methods: {
    showRule(item) {
      this.ruleContent = item.note || '<center>无</center>'
      this.showRuleModel = true
    }
  }
}
</script>

<style lang="scss" scoped>
.zengp-box {
  margin-top: 30rpx;

  .zp-des {
    font-size: 24rpx;
    color: #999999;

    .zp-des-t {
      font-size: 28rpx;
      color: #333333;
    }
  }

  .count-zp {
    font-size: 26rpx;
    color: #10a28f;
  }

  .zp-list {
    margin: 20rpx 0;
    background: #d7f5f1;
    border-radius: 10rpx;
    padding: 30rpx 20rpx 10rpx 20rpx;

    .zp-item {
      border-bottom: 1rpx solid #10a28f69;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;

      .con {
        font-size: 28rpx;
        color: #10a28f;

        .zp-l {
          width: 100rpx;
        }

        .zp-rule {
          font-size: 24rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
    }

    .zp-item:last-child {
      border: none;
      margin-bottom: 0;
    }
  }
}

.count-limit {
  font-size: 28rpx;
  color: #666666;
}

.rule_box {
  padding: 45rpx 30rpx 35rpx 30rpx;

  .tl {
    font-weight: 600;
    font-size: 34rpx;
    margin-bottom: 45rpx;
    text-align: center;
  }

  .content {
    font-size: 30rpx;
    line-height: 45rpx;
  }

  .bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    margin: auto;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    margin-top: 35rpx;
    text-align: center;
  }
}
</style>
